
import { Modal, Tabs } from 'antd';
import ReactDOM from "react-dom/client";
import React, { useEffect, useState } from 'react';
import $ from "jquery";
class BaseModalMenu {
    constructor() {
        this.id = `modal-${Math.random().toString(36).slice(2)}`;
        this.title = '阿里云';
        this.iconSvg = '<svg t="1748252217782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48843" width="200" height="200"><path d="M704 832H320a234.666667 234.666667 0 0 1-29.44-467.2 223.573333 223.573333 0 0 1 443.306667 0A234.666667 234.666667 0 0 1 704 832z m-192-618.666667a181.12 181.12 0 0 0-180.906667 172.16v19.413334h-19.413333A192 192 0 0 0 320 789.333333h384a192 192 0 0 0 8.96-384h-19.413333v-19.413333A181.12 181.12 0 0 0 512 213.333333z" fill="#333333" p-id="48844"></path></svg>'

        this.tag = 'button';
        this.$ele = document.createElement('div');
        this.$ele.id = this.id;
        document.body.appendChild(this.$ele);
        this.$root = ReactDOM.createRoot(this.$ele);
        this.ifInit = false;
        this.controlShow = () => { }; // 初始化为空函数
    }

    modalInit = (method) => {
        this.controlShow = method;
    }

    isActive(editor) {
        return false; // or false
    }

    isDisabled(editor) {
        return false; // or true
    }

    exec(editor, value) {
        if (this.ifInit) {
            this.controlShow(true);
            return;
        }
        this.$root.render(value);
        this.ifInit = true;
    }



}



// Extend menu
class ModalMenu extends BaseModalMenu {
    constructor() {

        super();
    }

    getValue(editor) {
        return <CsModal
            editor={editor}

            onInit={this.modalInit}
        />
    }
}





function CsModal({ editor, ...props }) {
    const [isModalVisible, setIsModalVisible] = useState(true);
    const close = () => {
        setIsModalVisible(false);
    }

    const onOk = () => {
        const node = {
            "type": "image",
            "src": "/bil_Ste_static/file_images/2025-05-27/7d4a2972-586e-4930-b2ec-e2d3ad41c61c.png",
            "href": "/bil_Ste_static/file_images/2025-05-27/7d4a2972-586e-4930-b2ec-e2d3ad41c61c.png",
            "alt": 1748325994620,
            "style": {},
            "children": [
                {
                    "text": ""
                }
            ]

        }
        editor.insertNode(node)
        close();
    }

    useEffect(() => {
        props?.onInit(setIsModalVisible);
    }, []);

    return <Modal
        title="阿里云"
        open={isModalVisible}
        onOk={onOk}
        onCancel={close}
        centered={true}
        width={800}

    >
        <div>
            <Tabs items={[
                {
                    label: "图库",
                    children: <div>图库</div>,
                    key: "1",
                },
                {
                    label: "上传图片",
                    children: <div>上传图片</div>,
                    key: "2",

                },
                {
                    label: "上传附件",
                    children: <div>上传附件</div>,
                    key: "3",

                }
            ]} defaultActiveKey="1"
            />

        </div>
    </Modal>
}

export const myModalMenuConf = {
    key: 'myModalMenu',
    factory() {
        return new ModalMenu()
    }
}
